<template>
	<div class="withdrawals_page">
		<div class="header">
			<van-nav-bar
				title="积分明细"
				left-arrow
				@click-left="onClickLeft"
				/>
		</div>
        <div class="kong"></div>
	    <div style="height: 100vh;background:#fff">

        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            @load="onLoad"
            finished-text="没有更多了"
            :immediate-check="immediate"
            :offset="10"
          >
            <div class="integral_dvs" v-for="(item,i) in items" :key=i>
                <p>{{item.integral_source}}<br>
                    <span>{{item.update_date | formatDate}}</span>
                </p>
                <p v-if="item.type == 1" class="blue_cl">{{item.type | formatPlusMin}}{{item.integral_wave}}</p>
                <p v-if="item.type == 0" class="red_cl">{{item.type | formatPlusMin}}{{item.integral_wave}}</p>
            </div>

          </van-list>
        </van-pull-refresh>

		</div>
	</div>
</template>
<script>
    import {formatDate} from '../../utils/filters.js'
	export default {
        data() {
            return {
                user:'',
                items:[],
                page:0,
                isLoading:false,
                loading: false,   //是否处于加载状态
                finished: false, //是否已加载完所有数据
                immediate:false
            }

        },
      filters:{
          formatDate(time){
              var data = new Date(time);
              return formatDate(data,'yyyy-MM-dd hh:mm');
          },
          formatPlusMin(type){
              if(type ==1){
                  return "+";
              }else if(type ==0){
                  return "-";
              }
          }

      },
      mounted:function(){
          const that = this;
          let local_user = localStorage.getItem("user");
          if (local_user != undefined && local_user != "undefined") {
              let user = JSON.parse(local_user);
              that.user = user;
              that.integral_by_user(0);
          }
      },
      methods:{
          onClickLeft(){
              this.$router.back(-1)
          },
          onRefresh(){
              console.log("下拉刷新");
              const  that = this;
              that.isLoading = true;

              that.page = 0;
              that.items=[];
              that.integral_by_user(0);
          },
          onLoad() {
              console.log("上拉加载");
              console.log(this.finished);
              if(this.items.length != 0){
                  this.page = this.page+1;
              }
              this.integral_by_user(1);



          },
          integral_by_user(type){
              const that = this;
              let p = "userId="+that.user.userId+"&page="+that.page;
              that.$sendRequest('/integra/integral_by_user',p).then(function(res){
                  console.log(res.data);
                  that.isLoading = false;
                  that.loading = false;
                  if(res.data.code ==0){
                      if(res.data.result.userIntegral.length < 10){
                          that.finished = true;
                      }
                      for(var i = 0;i<res.data.result.userIntegral.length;i++){
                          that.items.push(res.data.result.userIntegral[i]);
                      }
                      if(type ==0){
                          that.finished = false;
                      }
                  }

              })
          },
      }
   };
</script>
<style scoped="scoped">
	.kong{
        height:0.4rem;
        background:rgba(246,246,246,1);
    }
    .integral_dvs{
        margin: 0 1.7vh;
        height: 4rem;
        border-bottom: 0.1vh solid rgba(246,246,246,1);
        display: flex;
    }
    .integral_dvs p{
        flex: 1;
    }
    .integral_dvs p:first-child{
        /* padding-left: 1rem; */
        text-align: left;
        font-size: 1rem;
        padding-left: 0.2rem;
        line-height: 1.5rem;
    }
    .integral_dvs p:first-child span{
        font-size: 0.85rem;
        color: #CCCCCC;
    }

    .red_cl{
      text-align: right;
      padding-right: 0.5rem;
      color: #FF4242;
      padding-top: 1.55rem;
      font-size: 1rem;
    }
    .blue_cl{
      text-align: right;
      padding-right: 0.5rem;
      color: #4C9FFD;
      padding-top: 1.55rem;
      font-size: 1rem;
    }

    .header >>> .van-icon-arrow-left{
        color: #2c3e50;
    }
</style>

